<script>
  import ImageAvater from '@/sheep/components/s-avatar/s-avatar.vue';
  import sheep from '@/sheep';
  import MpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html.vue';
  import commentList from './commentList.vue';
  import { h5_url } from '@/sheep/config';


  export default {
    name: 'familyCircle',
    components: {
      MpHtml,
      ImageAvater,
      commentList,
    },
    data() {
      return {
        showGif: false,
        timeOut: null,
        showShareGuide: false,
        showFlag: false,
      };
    },
    props: {
      showMargin: {
        type: Boolean,
        default: true,
      },
      background: {
        type: String,
        default: '#F5F5F5',
      },
      info: {
        type: Object,
        default: () => {
          return {};
        },
      },
      border: {
        type: Boolean,
        default: true,
      },
      index: {
        type: Number,
        default: 0,
      },
      commentsList: {
        type: Array,
        default: () => {
          return [];
        },
      },
      // 是否显示删除
      isShowDel: {
        type: Boolean,
        default: true,
      },
      // 是否跳转家庭圈
      is_nav: {
        type: Boolean,
        default: true,
      },
      isShowReply: {
        type: Boolean,
        default: true,
      },
      options: {
        type: Object,
        default: () => {
          return {};
        },
      },
      home: {
        type: Boolean,
        default: false,
      },
      detailFlag: {
        type: Boolean,
        default: false,
      },
      is_share: {
        type: Boolean,
        default: false,
      },
    },
    computed: {
      sheep() {
        return sheep;
      },
      token() {
        return sheep.$store('user').isLogin;
      },
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      userInfo() {
        return sheep.$store('user').userInfo;
      },
      nc_url() {
        return sheep.$store('AI').nc_image;
      },
    },
    methods: {
      elementClick() {
        this.$emit('elementClick');
      },
      // 点赞朋友圈
      async likeInterface() {
        if (!this.token) {
          this.$emit('openLogin');
          return;
        }
        const data = await sheep.$api.family.checkAuth({
          family_id: this.options.family_id,
          action: 'add',
        });
        if (data.code != 1) {
          sheep.$helper.toast(data.msg);
          return;
        }
        const { code, msg } = await sheep.$api.family.like({
          comment_id: this.info.circle_id,
          type: 1,
        });
        if (code == 1) {
          if (!!this.timeOut) {
            clearTimeout(this.timeOut);
          }
          this.showGif = true;
          this.timeOut = setTimeout(() => {
            this.showGif = false;
            this.timeOut = null;
          }, 1000);
          this.$emit('likeInterface', this.index);
        }
      },
      // 预览照片
      previewPhoto(item) {
        let urls = [];
        this.info.circle.images.forEach((item, index) => {
          urls.push(item.image);
        });
        uni.previewImage({
          urls,
          current: item,
        });
      },
      // 嘉廷圈评论
      familyCircleReview(info, is_showComment = 0) {
        // console.log(info);
        if (!this.token) {
          this.$emit('openLogin');
          return;
        }
        if (!this.is_nav) {
          if (is_showComment == 1) {
            this.$emit('familyCircleReview');
          }
          return;
        }
        sheep.$router.go('/pages/familyPage/familyCircleDetails', {
          is_flag: this.options.is_flag != 1 ? 2 : 1,
          name: info.username || info.remark,
          is_detail: 1,
          id: info.circle_id || info.id,
          is_showComment,
          is_share: this.options.is_share != 1 ? 0 : 1,
          family_id: !!this.options.family_id ? this.options.family_id : '',
          is_show: this.options.is_share == 1 ? 1 : 0,
        });
      },
      secondLevelReplies(info, info2) {
        this.$emit('secondLevelReplies', info, info2);
      },
      topLevelReplies(info) {
        this.$emit('topLevelReplies', info);
      },
      deleteMoment() {
        uni.showModal({
          title: '删除家庭圈',
          content: '确定删除该条家庭圈？',
          success: async (res) => {
            if (!!res.confirm) {
              let data = await delCircle({
                circle_id: this.info.circle_id,
                type: this.options.is_flag != 1 ? 2 : 1,
              });
              if (data.status == 200) {
                uni.$emit('delectClecir');
                setTimeout(() => {
                  uni.navigateBack();
                }, 1500);
                this.$nav.showToastNone('删除成功');
              } else {
                uni.showToast({
                  title: data.msg,
                  icon: 'none',
                });
              }
            }
          },
        });
      },
      async openInfoPopup(info) {
        let {
          data,
        } = await getMemberUserInfo({
          member_id: info.id,
        });
        this.$refs.secondPopup.openPopup({
          background: `${this.IMG_URL}personalInformation.png`,
          memberInfo: data,
        });
      },
      async goDetail() {
        if (!this.token) {
          this.$emit('openLogin');
          return;
        }
        if (!!this.is_share) {
          return;
        }
        if (this.info.is_df == 1) {
          // 跳转用户详情
          if (this.detailFlag) {
            this.$nav.navigateTo('/pages/shiqinUserPage/personalHome', {
              id: this.info.member_id,
            });
          }
        } else {
          let {
            data,
          } = await getMemberUserInfo({
            member_id: this.info.member_id,
          });
          this.$emit('openCreateUser', data);
        }
      },
      async openCreateUser() {
        let {
          data,
        } = await getMemberUserInfo({
          member_id: this.info.create_member_id,
        });
        this.$emit('openCreateUser', data);
      },
      delCommentById(info) {
        this.$emit('delCommentById', info);
      },
      shareAppMessage(info) {
        // let image = this.info.image.split(',');
        // #ifdef APP-PLUS
        sheep.$platform.share.shareAPP({
          title: info.circle.content.replace(/<[^>]*>/g, ''),
          desc: '再小的家庭-也要有传承',
          link: `pages/familyPage/familyCircleDetails?family_id=${this.options.family_id}&is_flag=${this.options.is_flag}&name=${info.username || info.remark}&is_detail=1&id=${info.circle_id}&is_showComment=1&is_share=1&spid=${this.userInfo.uid}`,
          image: `${h5_url}/static/shiqin_transparent_icon.png`,
        });
        // #endif
        // #ifdef H5
        sheep.$platform.share.updateShareInfo({
          title: '拾亲',
          desc: info.circle.content.replace(/<[^>]*>/g, ''),
          link: `${h5_url}/#/pages/familyPage/familyCircleDetails?family_id=${this.options.family_id}&is_flag=${this.options.is_flag}&name=${info.username || info.remark}&is_detail=1&id=${info.circle_id}&is_showComment=1&is_share=1&spid=${this.userInfo.uid}`,
          image: `${h5_url}/static/fenxiang_icon.png`,
        });
        this.showShareGuide = true;
        // #endif
      },
    },
  };
</script>

<template>
  <view class="familyCircle flex flex-column align-center" @click.stop="familyCircleReview(info)">
    <view class="familyCircle_all flex" :style="{
      borderBottom:border? 'none': 'none',
      margin:showMargin ? '20rpx 21rpx':'0 21rpx 20rpx 21rpx'
    }">
      <view class="familyCircle_all_left">
        <view @click.stop="goDetail">
          <image-avater :width="62" :height="62"
                        :src="info.circle.member_avatar.indexOf('http') != -1 ?info.circle.member_avatar : `${nc_url}${info.circle.member_avatar}`"></image-avater>
        </view>
      </view>
      <view class="familyCircle_all_right ml_17">
        <view class="familyCircle_all_right_name flex align-center justify-between">
          <view class="flex align-center">
            <text class="familyCircle_all_right_name_text">
              {{ !!info.circle.member_surname && !!info.circle.member_daimyo ? `${info.circle.member_surname}${info.circle.member_daimyo}` : info.circle.member_remark
              }}
            </text>
            <view class="familyCircle_all_right_name_label ml_10 flex align-center justify-center"
                  v-if="!!info.circle.member_surname && !!info.circle.member_daimyo">
              <text class="familyCircle_all_right_name_label_text">{{ info.circle.member_remark }}</text>
            </view>
          </view>
          <!-- #ifdef APP-PLUS -->
          <view class="fs_32 fw_500 color_4B4B4B flex align-center">
            <view class="wh_200 hW_50 bg_F5F5F5 flex align-center justify-around mr_5"
                  style="border-radius: 8rpx"
                  v-if="showFlag"
            >
              <view class="fs_24 fw_500" @click.stop="showFlag = false">屏蔽</view>
              <view class="fs_24 fw_500" @click.stop="showFlag = false">举报</view>
            </view>
            <text @click.stop="showFlag = !showFlag">···</text>
          </view>
          <!-- #endif -->
        </view>
        <view class="flex align-center">
          <text class="familyCircle_all_right_time_text">{{ info.circle.timeAgo }}</text>
          <text class="familyCircle_all_right_time_text ml_10" @click.stop="deleteMoment"
                v-if="isShowDel && !is_share">
            删除
          </text>
        </view>
        <view class="familyCircle_all_right_content mt_7">
          <mp-html :content="info.circle.content" class="familyCircle_all_right_content_text"></mp-html>
        </view>
        <view class="familyCircle_all_right_imageList mt_17" :class="{
          grid1: info.circle.images.length == 1,
          grid2: info.circle.images.length == 2 || info.circle.images.length == 4,
          grid3: info.circle.images.length == 3 || info.circle.images.length == 5 || info.circle.images.length == 6 || info.circle.images.length == 7 || info.circle.images.length == 8 || info.circle.images.length == 9,
        }" v-if="!!info.circle.images">
          <view class="familyCircle_all_right_imageList_all flex align-center justify-center"
                v-for="(item,index) in info.circle.images" :key="index" @click.stop="previewPhoto(item.image)">
            <image class="familyCircle_all_right_imageList_image" :src="item.image" mode="aspectFill"></image>
          </view>
        </view>
        <view class="familyCircle_all_right_time mt_10 flex align-center" v-if="!!info.circle.create_username">
          <text class="familyCircle_all_right_time_publisher ml_10" style="color: #4887FF;"
                @click.stop="openCreateUser">
            发布人：{{ info.circle.create_surname }}{{ info.circle.create_daimyo }}
          </text>
          <view class="familyCircle_all_right_time_icon flex align-center justify-center ml_10"
                v-if="!!info.create_user_desc" @click.stop="openInfoPopup(info)">
            <text class="familyCircle_all_right_time_icon_text">{{ info.create_user_desc }}</text>
          </view>
        </view>
        <view v-if="!is_share" :class="!!info.record && !!info.record.length?'':'mb_48'"
              class="familyCircle_all_right_operationList flex justify-end mt_10">
          <view class="familyCircle_all_right_operationList_thumbsUp flex flex-column align-center"
                @click.stop="likeInterface">
            <image class="familyCircle_all_right_operationList_thumbsUp_image"
                   :src="info.circle.is_like != 1 ? `${IMG_URL}/index/thumbsUp.png`:`${IMG_URL}/index/thumbsUp_select.png`"></image>
            <text class="familyCircle_all_right_operationList_thumbsUp_text mt_6">爱心 {{ info.circle.like_count }}
            </text>
            <image :src="`${IMG_URL}/index/dianzan_gif.gif`" v-if="showGif" class="gif"></image>
          </view>
          <view class="familyCircle_all_right_operationList_comments flex flex-column align-center"
                @click.stop="familyCircleReview(info,1)">
            <image class="familyCircle_all_right_operationList_comments_image"
                   :src="`${IMG_URL}/index/jiating_gengduoIcon.png`" mode="widthFix"></image>
            <text class="familyCircle_all_right_operationList_comments_text mt_6">评论 {{ info.circle.comment_count }}
            </text>
          </view>
          <!-- #ifdef MP-WEIXIN -->
          <view class="familyCircle_all_right_operationList_share flex flex-column align-center"
                style="position: relative"
                @click.stop>
            <image class="familyCircle_all_right_operationList_share_image"
                   :src="`${IMG_URL}/index/jiating_fenxiangIcon.png`" mode="widthFix"></image>
            <text class="familyCircle_all_right_operationList_share_text mt_6">分享</text>
            <button open-type="share"
                    :data-info="info"
                    :data-path="`/pages/familyPage/familyCircleDetails?family_id=${options.family_id}&is_flag=${options.is_flag}&name=${info.username || info.remark}&is_detail=1&id=${info.circle_id}&is_showComment=1&is_share=1&spid=${userInfo.uid}`"
                    class="wh_39 hW_39"
                    style="opacity: 0;position: absolute"
                    @tap.stop="shareAppMessage(info)"
            ></button>
          </view>
          <!-- #endif -->
          <!-- #ifndef MP-WEIXIN -->
          <view class="familyCircle_all_right_operationList_share flex flex-column align-center"
                style="position: relative"
                @click.stop="shareAppMessage(info)">
            <image class="familyCircle_all_right_operationList_share_image"
                   :src="`${IMG_URL}/index/jiating_fenxiangIcon.png`" mode="widthFix"></image>
            <text class="familyCircle_all_right_operationList_share_text mt_6">分享</text>
          </view>
          <!-- #endif -->
        </view>
        <view class="familyCircle_all_right_likesDetails flex align-center mt_20  mb_48"
              v-if="!!info.record && !!info.record.length">
          <image class="familyCircle_all_right_likesDetails_image"
                 :src="`${IMG_URL}/index/thumbsUp_select.png`" mode="widthFix"></image>
          <text class="familyCircle_all_right_likesDetails_text ellipsis-multiline webkit-line-clamp-1 ml_9">
            {{ info.record.join('、') }}
          </text>
        </view>
      </view>
    </view>
    <!-- 评论列表 -->
    <commentList :is_share="is_share" :commentsList="info.circle.children" :background="background"
                 v-if="!!info.circle.children && info.circle.children.length > 0"
                 @topLevelReplies="topLevelReplies" @secondLevelReplies="secondLevelReplies"
                 :isShowReply="isShowReply" @delCommentById="delCommentById"></commentList>
    <!-- #ifdef H5 -->
    <view v-if="showShareGuide"
          class="guide-wrap"
          @click.stop="showShareGuide = false"
    >
      <image
        class="guide-image"
        :src="sheep.$url.static('/assets/addons/shopro/uniapp/share/share_guide.png')"
      ></image>
    </view>
    <!-- #endif -->
  </view>
</template>

<style scoped lang="scss">
  .familyCircle {
    width: 702rpx;
    //background: #FDFDFD;
    //border-radius: 21rpx 21rpx 21rpx 21rpx;

    overflow: hidden;

    .familyCircle_all {
      margin: 20rpx 21rpx;
      border-bottom: 2rpx solid #E5E5E5;

      .familyCircle_all_left {
        width: 62rpx;
      }

      .familyCircle_all_right {
        width: 572rpx;

        .familyCircle_all_right_name {
          position: relative;

          .familyCircle_all_right_name_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 30rpx;
            color: #000000;
          }

          .familyCircle_all_right_name_label {
            width: 66rpx;
            height: 30rpx;
            background: #FF7950;
            border-radius: 15rpx 15rpx 15rpx 15rpx;

            .familyCircle_all_right_name_label_text {
              font-weight: 500;
              font-size: 16rpx;
              color: #FFFFFF;
            }
          }

          .familyCircle_all_right_name_del {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 20rpx;
            color: #A0A0A0;
          }
        }

        .familyCircle_all_right_content {
          width: 572rpx;

          &_text {
            width: 572rpx;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #0F0F0F;
          }
        }

        .familyCircle_all_right_imageList {
          width: 534rpx;
        }

        .familyCircle_all_right_time {


          .familyCircle_all_right_time_publisher {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 20rpx;
            color: #696969;
          }

          .familyCircle_all_right_time_icon {
            height: 20rpx;
            background: #FF7950;
            border-radius: 15rpx 15rpx 15rpx 15rpx;
            padding: 0 10rpx;

            .familyCircle_all_right_time_icon_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 16rpx;
              color: #FFFFFF;
            }
          }
        }

        .familyCircle_all_right_dividingLine {
          width: 572rpx;
          border: 2rpx solid #EAEAEA;
        }

        .familyCircle_all_right_operationList {
          width: 534rpx;

          .familyCircle_all_right_operationList_thumbsUp {
            position: relative;

            &_image {
              width: 39rpx;
              height: 39rpx;
            }

            &_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 18rpx;
              color: #3B3B3B;
            }
          }

          .familyCircle_all_right_operationList_comments {
            margin: 0 39rpx;

            &_image {
              width: 39rpx;
              height: 39rpx;
            }

            &_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 18rpx;
              color: #3B3B3B;
            }
          }

          .familyCircle_all_right_operationList_share {
            &_image {
              width: 39rpx;
              height: 39rpx;
            }

            &_text {
              font-family: PingFang SC, PingFang SC;
              font-weight: 500;
              font-size: 18rpx;
              color: #3B3B3B;
            }
          }
        }

        .familyCircle_all_right_likesDetails {
          &_image {
            width: 23rpx;
            height: 39rpx;
          }

          &_text {
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #656565;
          }
        }
      }
    }
  }

  .familyCircle_all_right_time_text {
    font-family: PingFang SC, PingFang SC;
    font-weight: 300;
    font-size: 20rpx;
    color: #4B4B4B;
  }

  .grid1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-template-rows: none;

    .familyCircle_all_right_imageList_all {
      width: 534rpx;
      border-radius: 20rpx;
      overflow: hidden;

      .familyCircle_all_right_imageList_image {
        max-width: 534rpx;
        max-height: 534rpx;
      }
    }
  }

  .grid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    grid-column-gap: 15rpx;
    grid-row-gap: 15rpx;

    .familyCircle_all_right_imageList_all {
      width: 252rpx;
      height: 252rpx;
      border-radius: 20rpx;
      overflow: hidden;

      .familyCircle_all_right_imageList_image {
        max-width: 252rpx;
        max-height: 252rpx;
      }
    }
  }

  .grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: none;
    grid-column-gap: 15rpx;
    grid-row-gap: 15rpx;

    .familyCircle_all_right_imageList_all {
      width: 168rpx;
      height: 168rpx;
      border-radius: 20rpx;
      overflow: hidden;

      .familyCircle_all_right_imageList_image {
        max-width: 168rpx;
        max-height: 168rpx;
      }
    }
  }

  .gif {
    position: absolute;
    top: -20rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 60rpx;
    height: 60rpx;
  }

  /* #ifdef H5 */
  .guide-wrap {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10070;
    background: rgba(0, 0, 0, 0.6);
  }

  .guide-image {
    right: 30rpx;
    top: 0;
    position: fixed;
    width: 580rpx;
    height: 430rpx;
    z-index: 10080;
  }

  /* #endif */
</style>